<template>
  <div style="margin-top: 20px" class="oe-piyue">
    <top-tip :showBack="false"></top-tip>
    <div class="oe-approval-search">
      <div class="oe-approval-input">
        <!-- <span>考试：</span> -->
        <a-input
          v-model="title"
          @keyup.enter.native="getDataList"
          placeholder="输入考试名称"
        >
          <template #prefix>
            <span class="iconfont icon-sousuo"></span>
          </template>
        </a-input>
        <a-button type="primary" @click.stop="getDataList" class="chaxun">查询</a-button>
      </div>
    </div>
    <div class="oe-approval-manage" v-loading="loading">
      <!-- <div class="oe-approval-input">
        考试：
        <a-input
          v-model="title"
          class="oe-input"
          @keyup.enter.native="getDataList"
          placeholder="输入考试名称"
        />
        <a-button type="primary" @click.stop="getDataList">查询</a-button>
      </div> -->
      <div class="oe-approval-container">
        <div class="oe-exam-item" v-for="(item, index) in paperList" :key="index">
          <div class="oe-item-top">
            <span class="oe-item-split"></span>
            <span class="oe-item-label"
              >{{ item.Title }}
              <small v-if="item.IshasNoRecord" style="color: red">[该考试存在未同步完成的考生记录]</small></span
            >
          </div>
          <div class="oe-item-content">
            <div class="oe-item-line">考试时间： {{ item.StartTime }} ~ {{ item.EndTime }}</div>
            <div class="oe-item-line">
              <div class="oe-line-left">创建人：{{ item.CreatorName }}</div>
              <div class="oe-line-right" v-if="item.SortName == '' || item.SortName == null">所属分类： --</div>
              <div class="oe-line-right" v-else>所属分类：{{ item.SortName }}</div>
            </div>
            <div class="oe-item-line">
              <div class="oe-line-right" v-if="item.Remark == '' || item.Remark == null">要求： --</div>
              <div class="oe-line-right" v-else>要求：{{ item.Remark }}</div>
            </div>
          </div>
          <div class="oe-item-data">
            <div class="oe-item-data__detail oe-item-data__look">
              <!-- <div class="oe-item-data__detail oe-item-data__look" @click.stop="lookDetail(1, item)"> -->
              <div class="oe-item-data__text color-total">{{ item.ALLMarkCount }}</div>
              <div class="oe-item-data__name">总已批阅</div>
            </div>
            <div class="oe-item-data__detail" @click.stop="lookDetail(2, item)">
              <div class="oe-item-data__text color-un" v-if="item.MarkIng <= 0">{{ item.UnMarkCount }}</div>
              <div class="oe-item-data__text color-un" v-if="item.MarkIng > 0">
                {{ item.UnMarkCount }}/{{ item.MarkIng }}
              </div>
              <div class="oe-item-data__name" v-if="item.MarkIng <= 0">未批阅</div>
              <div class="oe-item-data__name" v-if="item.MarkIng > 0">
                未批阅/批阅中
                <a-tooltip placement="bottom" class="oe-push-top__title">
                  <template slot="title">
                    <span class="oe-title-info">批阅中的数量统计的是所有批阅教师正在批阅的学生</span>
                  </template>
                  <i class="iconfont icon-wenti"></i>
                </a-tooltip>
              </div>
            </div>
            <div class="oe-item-data__detail" @click.stop="lookDetail(3, item)">
              <div class="oe-item-data__text color-un">{{ item.MarkCount }}</div>
              <div class="oe-item-data__name">我已批阅</div>
            </div>
          </div>
        </div>
      </div>
      <div class="oe-item-pagenation" v-if="paperList.length > 0">
        <a-pagination
          :showSizeChanger="true"
          :pageSizeOptions="pageSizeOptions"
          @showSizeChange="onShowSizeChange"
          v-model="pagination.current"
          :total="pagination.total"
          :pageSize="pagination.pageSize"
          :showTotal="(total) => `共 ${total} 条`"
          @change="changePage"
        />
      </div>
      <template v-if="paperList.length == 0">
        <blankTips></blankTips>
      </template>
    </div>
  </div>
</template>

<script>
import blankTips from '@/components/blank-tips/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
import topTip from '@/components/top-tip/index.vue';
export default {
  mixins: [GetOperationList],
  name: 'approvalManage',
  components: {
    blankTips,
    topTip,
  },
  data() {
    return {
      searPaper: '',
      // 批阅列表
      paperList: [],
      pageSizeOptions: ['10', '20', '50', '100', '1000'],
      title: '',
      // 分页配置
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      loading: false,
    };
  },
  mounted() {
    this.getOpeartion();
  },
  methods: {
    // 获取页面操作
    getOpeartion() {
      this.loading = true;
      this.GetOperationList().then((rst) => {
        this.loading = false;
        this.operationList = [];
        this.IsOpList = [];
        if (rst.code === 1) {
          if (rst.list.length) {
            rst.list.forEach((item) => {
              if (item.IsWrite) {
                this.operationList.push(item.Name);
              }
              this.IsOpList = rst.list;
            });
          }
          this.getDataList();
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    //获取数据列表
    getDataList() {
      this.loading = true;
      window.scrollTo(0, 0);
      this.$http
        .post('/api/design/marking/getMarkExamList', {
          title: this.title,
          sort: '',
          page: this.pagination.current || 1,
          pageSize: this.pagination.pageSize || 10,
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code == 1) {
            this.paperList = [];
            this.pagination.current = rst.pagination.pageIndex;
            this.pagination.pageSize = rst.pagination.pageSize;
            this.pagination.total = rst.pagination.totalCount;
            if (rst.list.length) {
              rst.list.forEach((item, index) => {
                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                this.paperList.push({
                  ...item,
                  Number: number,
                });
              });
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    onShowSizeChange(current, pageSize) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;
      this.$nextTick(() => {
        this.getDataList();
      });
    },
    changePage(current, pageSize) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;
      this.$nextTick(() => {
        this.getDataList();
      });
    },
    lookDetail(type, data) {
      if (!this.operationList.includes('mark')) {
        this.$message.warn('您没有权限批阅！');
        return;
      }
      if (!data.UnMarkCount && !data.MarkIng && type === 2) {
        this.$message.warn('暂无批阅的试卷！');
        return;
      } else if (!data.MarkCount && type === 3) {
        this.$message.warn('暂无我已批阅的试卷！');
        return;
      }
      switch (type) {
        case 1:
          // this.$router.push({
          //   name: 'totalApproval',
          //   params: {
          //     examid: '1111'
          //   }
          // });
          break;
        case 2:
          this.$router.push({
            name: 'approvalPaper',
            params: {
              examid: data.Id,
            },
          });
          break;
        case 3:
          this.$router.push({
            name: 'markedPaper',
            params: {
              examid: data.Id,
              type: 2,
            },
          });
          break;
        default:
          break;
      }
    },
  },
};
</script>
